<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>人力资源管理系统</title>
	
	<link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" />
	
	<!--[if lt IE 9]>
	<link rel="stylesheet" href="img/css/ie.css" type="text/css" media="screen" />
	<script src="img/js/html5.js"></script>
	<![endif]-->
	<script src="../api/api.js"></script>
	<script src="../lib/vue.js"></script>
	<script src="../js/jquery-1.5.2.min.js" type="text/javascript"></script>

	<script src="../js/hideshow.js" type="text/javascript"></script>
	<script src="../js/jquery.tablesorter.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../js/jquery.equalHeight.js"></script>
	<script type="text/javascript">
	$(document).ready(function() 
    	{ 
      	  $(".tablesorter").tablesorter(); 
   	 } 
	);
	$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});
    </script>
    <script type="text/javascript">
    $(function(){
        $('.column').equalHeight();
    });
</script>
  <script type="text/javascript">
        function preview1(file) {
            var img = new Image(), url = img.src = URL.createObjectURL(file)
            var $img = $(img)
            img.onload = function() {
                URL.revokeObjectURL(url)
                $('#preview').empty().append($img)
            }
        }
        function preview2(file) {
            var reader = new FileReader()
            reader.onload = function(e) {
                var $img = $('<img>').attr("src", e.target.result)
                $('#preview').empty().append($img)
            }
            reader.readAsDataURL(file)
        }
         
        $(function() {
            $('[type=file]').change(function(e) {
                var file = e.target.files[0]
                preview1(file)
            })
        })
    </script>
<script type="text/javascript">
	setInterval(function() {
		var now = (new Date()).toLocaleString();
		$('.current-time').text(now);
	}, 1000);
</script>


</head>


<body>

	<header id="header">
		<hgroup>
			<h1 class="site_title"><a href="index.html">人力资源管理系统</a></h1>
			<h2 class="section_title"></h2><div class="btn_view_site"><a href="login.html">注销</a></div>
		</hgroup>
	</header> <!-- end of header bar -->
	
	<section id="secondary_bar">
		<div class="user">
			<p>admin</p>
			<!-- <a class="logout_user" href="#" title="Logout">Logout</a> -->
		</div>
		<div class="breadcrumbs_container">
			<article class="breadcrumbs"><a href="index.html">系统管理中心</a> <div class="breadcrumb_divider"></div> <a href="leclist.html">人员信息查看</a><div class="breadcrumb_divider"></div><a class="current">人员详细信息</a></article>
			<div class="current-time"></div>
		</div>
	</section><!-- end of secondary bar -->
	
	<aside id="sidebar" class="column">
	<h3>人员管理</h3>
	<ul class="toggle">
		<li class="icn_new_article"><a href="lecadd.html">人员信息录入</a></li>
		<li class="icn_categories"><a href="leclist.html">人员信息查看</a></li>
		
	</ul>
	
	<h3>应聘信息管理</h3>
    <ul class="toggle">
        <li class="icn_new_article"><a href="hireinfo.html">应聘信息录入</a></li>
        <li class="icn_see_onlineUser"><a href="rencaiku.html">应聘信息查看</a></li>
    </ul>
    
    <h3>公告管理</h3>
    <ul class="toggle">
        <li class="icn_see_onlineUser"><a href="notice_check.html">公告查看</a></li>
        <li class="icn_categories"><a href="notice_edit.html">公告编辑</a></li>
        <li class="icn_new_article"><a href="notice_add.html">公告添加</a></li>
     
    </ul>
	
	
	
	
	<footer>
		
	</footer>
</aside><!-- end of sidebar -->
	
	<section id="main" class="column">
		
			<article class="module width_full" id="app-detail">
				<header><h3>人员详细信息</h3></header>
					<div class="module_content">
							<fieldset style="width: 40%; float: left; margin-right: 180px;">
								<label>员工ID</label>
								<input type="text" name="id" id="id" disabled style="width:90%" v-model="user.id">
							</fieldset>
							<fieldset style="width: 40%; float: left;">
								<label>姓名</label>
								<input type="text" name="username" id="username" style="width:90%" v-model="user.username">
							</fieldset>	
							<fieldset style="width: 40%; float: left; margin-right: 180px;" >
								<label>密码</label>
								<input type="text" name="password" id="password" disabled style="width:90%" v-model="user.password">
							</fieldset>
							<fieldset style="width: 40%; float: left;">
								<label>是否在职</label>
								<input type="text" name="iswork" id="iswork" disabled style="width:90%" v-model="user.isLock">
							</fieldset>	
							<fieldset style="width: 40%; float: left; margin-right: 180px;">
								<label>身份证号码</label>
								<input type="text" name="idcard" id="idcard" style="width:90%" disabled v-model="user.idCard">
							</fieldset >
							<fieldset style="width:40%;float:left;">
								<label>性别</label>
								<input type="text" name="sex" id="sex" style="width:90%" disabled v-model="user.sex">
							</fieldset>
							
							<fieldset style="width: 40%; float: left; margin-right: 180px;" >
								<label>是否管理员</label>
								<input type="text" name="isadmin" id="isadmin" style="width:90%" disabled v-model="user.isadmin">
							</fieldset>
							<fieldset style="width:40%;float:left;" >
								<label>出生日期</label>
								<input type="text" name="birthday" id="birthday" style="width:90%" disabled v-model="user.birthday">
							</fieldset>
							<fieldset style="width: 40%; float: left; margin-right: 180px;" >
								<label>职位</label>
								<input type="text" name="position" id="position" style="width:90%" v-model="user.position">
							</fieldset>
							<fieldset style="width:40%;float:left;" >
								<label>年龄</label>
								<input type="text" name="age" id="age" style="width:90%" disabled v-model="user.age">
							</fieldset>
							<fieldset style="width: 40%; float: left; margin-right: 180px;" >
								<label>手机号码</label>
								<input type="text" name="mobile" id="mobile" style="width:90%" v-model="user.mobile">
							</fieldset>
							<fieldset style="width: 40%; float: left;" >
								<label>邮箱</label>
								<input type="text" name="email" id="email" style="width:90%" v-model="user.email">
							</fieldset>

							<fieldset style="width:100%; float:left; margin-right:1%;">
								<label>简介</label>
								<textarea rows="6" name="content" id="content" v-model="user.content"></textarea>
							</fieldset>	
							</fieldset><div class="clear"></div>			
					</div>
				<footer>
					<div class="submit_link">
						<input type="submit" name="save"  id="save" value="保存" class="save_btn" @click="save()">
						<button class="reset" id="reset" @click="reset()" >重置</button>
					</div>
					
				</footer>
			</article>
		<div class="spacer"></div>
	</section>
	<script type="text/javascript">

			function $getId(id) {
                return document.getElementById(id);
            }
            
			const vm = new Vue({
				el:"#app-detail",
				data:{
					user:{},
					usernameValue: null,
					positionValue: null,
					mobileValue:  null,
					emailValue:  null,
					contentValue:  null,
				},
				
				created:function(){
					let user = localStorage.getItem("detailUser");
					console.log(JSON.parse(user));
					this.user = JSON.parse(user);
					this.user.isLock = this.user.isLock=="1"?"否":"是";
					this.user.isadmin = this.user.isadmin=="1"?"是":"否";
					this.user.sex = this.user.sex=="1"?"男":"女";

					this.usernameValue = this.user.username;
					this.positionValue = this.user.position;
					this.mobileValue = this.user.mobile;
					this.emailValue = this.user.email;
					this.contentValue = this.user.content;
					

					let reset = $getId("reset"),
	            	save = $getId("save"),
	            	username = $getId("username"),
	            	position = $getId("position"),
	            	mobile = $getId("mobile"),
	            	email = $getId("email"),
	            	content = $getId("content");

	            	
	            	
	            	
				},
				methods:{
					back:function(){
						location.href="./showUser.html";
					},

					reset: function(){
						this.user.username = this.usernameValue;
						this.user.position = this.positionValue;
						this.user.mobile = this.mobileValue;
						this.user.email = this.emailValue;
						this.user.content = this.contentValue;
						
					},

					save: function(){
						let that = this;
		           		if(confirm("确定保存信息吗？")){
		           		this.user.isLock = this.user.isLock=="是"?"0":"1";
						this.user.isadmin = this.user.isadmin=="是"?"1":"0";
						this.user.sex = this.user.sex=="男"?"1":"0";

						console.log(that.user);

               			 myApi.user.updateUser(that.user, function(err, data) {
		                    if (err) {
		                        console.log(err);
		                    }else{
		                        alert("保存成功");
		                        location.href="leclist.html";
		                    }
		                	});

		           		}
           			}


				}
			})


			
           

	</script>



</body>

</html>